<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="确认订单"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <!-- 地址组件 -->
            <my-address
                @selectAddress="selectAddress"
                :addressInfo="addressInfo"
            ></my-address>
            <!-- 地址组件 -->

            <!-- 商品列表组件 -->
            <div class="goods-list">
                <div class="goods-list-title">订单商品</div>
                <div
                    class="goods-item"
                    v-for="(item,index) of goodsList"
                    :key="index"
                >
                    <div class="goods-img-box">
                        <img
                            class="goods-img"
                            :src="item.imgs[0].title_img"
                        />
                    </div>
                    <div class="goods-info-box">
                        <div class="goods-name">{{item.title}}</div>
                        <div class="goods-format">
                            <span v-if="item.attr_values">{{item.attr_values+'，'}}</span>
                            <span>{{item.cart_num+'件'}}</span>
                        </div>
                        <div class="goods-other-info">
                            <div class="goods-price">￥{{item.price_market | currency}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 商品列表组件 -->

            <!-- 订单信息组件 -->
            <div class="order-info-box">
                <div class="order-banlance">
                    <div class="order-banlance-name">商品金额</div>
                    <div class="order-banlance-info">￥{{allPrice | currency}}</div>
                </div>
                <div class="order-coupon">
                    <div class="order-coupon-name">店主特享</div>
                    <div class="order-coupon-info">-￥{{vipCoupon | currency}}</div>
                </div>
                <div class="order-coupon">
                    <div class="order-coupon-name">会员特享</div>
                    <div class="order-coupon-info">-￥{{memberCoupon | currency}}</div>
                </div>
                <div class="order-coupon">
                    <div class="order-coupon-name">服务费</div>
                    <div class="order-coupon-info">￥{{servicePrice | currency}}</div>
                </div>
                <div class="order-postage">
                    <div class="order-postage-name">运费</div>
                    <div class="order-postage-info">￥{{postage | currency}}</div>
                </div>
            </div>
            <!-- 订单信息组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 结算栏-->
        <div class="banlance-box">
            <div class="banlance-info">实付款：￥<span>{{parseInt(totalPrice)+parseInt(postage) | currency}}</span></div>
            <div
                class="go-pay"
                @click="goPay"
            >立即付款</div>
        </div>
        <!-- 结算栏 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import MyAddress from './components/MyAddress'
export default {
    name: 'OrderConfirm',
    components: {
        CommonHeader,
        CommonScroll,
        MyAddress
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.6rem'
            },
            addressInfo: '',
            goodsList: [],
            totalPrice: 0,
            addressId: '',
            isBalance: false,
            postage: 0,
            allPrice: 0,
            vipCoupon: 0,
            memberCoupon: 0,
            servicePrice: 0
        }
    },
    mounted() {
        if (!sessionStorage.getItem('cart_ids')) {
            this.$router.push('/cart')
        }
        this.getGoodsList()
        this.getAddressList()
    },
    beforeDestroy() {
        sessionStorage.removeItem('cart_address')
    },
    methods: {
        selectAddress() {
            this.$router.push({
                path: '/address',
                query: {
                    addressType: 'select'
                }
            })
        },
        goPay() {
            if (this.addressId == '') {
                this.commonDialog.alert('提示', '请选择收货地址！')
                return
            }
            if (this.isBalance) {
                this.commonDialog.alert('提示', '请勿重复提交！')
                return
            }
            this.isBalance = true
            let postData = this.qs.stringify({
                cart_ids: JSON.parse(sessionStorage.getItem('cart_ids')),
                address_id: this.addressId
            })
            this.axios.post('/api/orders/create.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    sessionStorage.removeItem('cart_ids')
                    sessionStorage.removeItem('cart_goods')
                    sessionStorage.removeItem('cart_address')
                    sessionStorage.setItem(
                        'cart_price',
                        JSON.stringify(
                            parseInt(this.totalPrice) + parseInt(this.postage)
                        )
                    )
                    const orderId = data.data
                    this.isBalance = false
                    this.$router.push({
                        path: '/goPay',
                        query: {
                            orderId: orderId
                        }
                    })
                } else {
                    this.isBalance = false
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getPostage(id) {
            let postData = this.qs.stringify({
                address_id: id
            })
            this.axios.post('/api/orders/postage.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.postage = data.data
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getAddressList() {
            if (sessionStorage.getItem('cart_address')) {
                this.addressInfo = JSON.parse(
                    sessionStorage.getItem('cart_address')
                )
                this.addressId = JSON.parse(
                    sessionStorage.getItem('cart_address')
                ).id
                this.getPostage(
                    (this.addressId = JSON.parse(
                        sessionStorage.getItem('cart_address')
                    ).id)
                )
            } else {
                this.axios.post('/api/user/address/list.json').then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        data.data.forEach(item => {
                            if (item.is_default == 1) {
                                this.addressInfo = item
                                this.addressId = item.id
                                this.getPostage(item.id)
                            }
                        })
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
            }
        },
        getGoodsList() {
            if (sessionStorage.getItem('cart_goods')) {
                this.goodsList = JSON.parse(
                    sessionStorage.getItem('cart_goods')
                )
                this.goodsList.forEach(item => {
                    this.allPrice += item.price_market * item.cart_num
                })
            }
            if (sessionStorage.getItem('cart_price')) {
                this.totalPrice = JSON.parse(
                    sessionStorage.getItem('cart_price')
                )
            }
            if (sessionStorage.getItem('cart_vipCoupon')) {
                this.vipCoupon = JSON.parse(
                    sessionStorage.getItem('cart_vipCoupon')
                )
            }
            if (sessionStorage.getItem('cart_memberCoupon')) {
                this.memberCoupon = JSON.parse(
                    sessionStorage.getItem('cart_memberCoupon')
                )
            }
            if (sessionStorage.getItem('cart_servicePrice')) {
                this.servicePrice = JSON.parse(
                    sessionStorage.getItem('cart_servicePrice')
                )
            }
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.goods-list
    background #fff
    .goods-list-title
        padding 0.61rem 0.4rem 0.13rem 0.4rem
        font-weight bold
        font-size 0.43rem
        color #131313
        line-height 1
    .goods-item
        display flex
        align-items center
        height 2.8rem
        padding 0 0.4rem
        border-bottom 1px solid #e5e5e5
        box-sizing border-box
        .goods-img-box
            width 2.18rem
            height 2.18rem
            box-sizing border-box
            overflow hidden
            border-radius 3px
            .goods-img
                width 100%
                height 100%
        .goods-info-box
            flex 1
            min-width 1px
            margin-left 0.42rem
            .goods-name
                font-size 0.4rem
                color #131313
                line-height 1.3
                white-space nowrap
                overflow hidden
                text-overflow ellipsis
            .goods-format
                margin-top 0.18rem
                font-size 0.32rem
                color #888
                line-height 1.3
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
            .goods-other-info
                display flex
                justify-content space-between
                align-items baseline
                margin-top 0.18rem
                .goods-price
                    font-size 0.4rem
                    color #131313
    .goods-item:last-child
        border none
.order-info-box
    margin-top 0.18rem
    background #fff
    .order-banlance, .order-postage, .order-coupon
        display flex
        align-items center
        justify-content space-between
        height 1.14rem
        padding 0 0.4rem
        border-bottom 1px solid #eee
        .order-banlance-name
            font-weight bold
            font-size 0.37rem
            color #131313
        .order-postage-name, .order-coupon-name
            font-size 0.37rem
            color #131313
        .order-banlance-info, .order-postage-info, .order-coupon-info
            font-size 0.37rem
            color #131313
    .order-postage
        border none
.banlance-box
    position absolute
    bottom 0
    left 0
    right 0
    display flex
    align-items center
    height 1.6rem
    padding 0 0.4rem
    background #fff
    border-top 1px solid #eee
    box-sizing border-box
    .banlance-info
        flex 1
        font-size 0.37rem
        color #131313
        span
            font-weight bold
            font-size 0.48rem
            color #131313
    .go-pay
        width 3.06rem
        height 1.04rem
        line-height 1.04rem
        text-align center
        background #4b866e
        font-size 0.37rem
        color #fff
        border-radius 30px
</style>


